﻿<!DOCTYPE html>
<%@page language="java" contentType="text/html; charset=UTF-8"%>

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html lang="en">

<!-- Source is http://themes.loxdesign.net/phoenix/forms_elements.html -->

<head>
<meta charset="utf-8">
<title>Good Received Note</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="">
<meta name="author" content="">
<!-- ===================== Touch Icons ===================== -->
<link rel="shortcut icon" href="Controls/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="image/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="image/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="image/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="image/apple-touch-icon-57-precomposed.png">
<!-- ===================== CSS ===================== -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- Site specific - CSS -->
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/jquery-ui-1.8.20.custom.css">
<link rel="stylesheet" href="css/chosen.css">
<link rel="stylesheet" href="css/dropkick.css">
<link rel="stylesheet" href="css/multi-select.css">
<link rel="stylesheet" href="css/jquery.ibutton.css">
<!-- Site specific - CSS -->
<link rel="stylesheet" href="css/prettify.css">
<link rel="stylesheet" href="css/jquery-ui-1.8.20.custom.css">
<link rel="stylesheet" href="css/jquery.tagedit.css">
<link rel="stylesheet" href="css/calendar_default.css">
<link rel="stylesheet" href="css/calendar_dark.css">
<link rel="stylesheet" href="css/jquery.miniColors.css">
<link rel="stylesheet" href="css/colorpicker.css">
<!-- Common - CSS -->
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/theme_light.css" class="style_set">
<!--[if lt IE 9]>
<script src="/js/html5.js"></script>
<![endif]-->

<script>
	function openWin() {

	}
</script>

</head>


<body>

	<div id="loader_cont">
		<img src="image/page_loader.gif">
	</div>
	<div class="options_cont">
		<form name="myForm">
			<a class="options_text" href="#">
				<div class="vText"
					style="width: 5px; height: 70px; text-align: center; vertical-align: middle">
					Modules</div>
			</a>
			<div class="options group" style="left: 0; top: -898"></div>
		</form>
	</div>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span
					class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>
				</a>
				<div class="nav-collapse">
					<ul class="nav main_nav" role="navigation">
						<li id="mail" class="styled dropdown mail"><a
							class="dropdown-toggle" data-toggle="dropdown" href="#">Mail<span class="info">2</span></a>
							<ul class="dropdown-menu top_menu">
								<li><a class="mn_new_msg" href="mail.html"><span>New Message</span></a></li>
								<li><a class="mn_inbox" href="mail.html"><span>Inbox</span></a></li>
								<li><a class="mn_outbox" href="mail.html"><span>OutBox</span></a></li>
								<li><a class="mn_spam" href="mail.html"><span>Spam</span></a></li>
								<li><a class="mn_trash" href="mail.html"><span>Trash</span></a></li>
							</ul></li>
						<li id="chat" class="styled chat"><a data-toggle="modal"
							href="#chat_modal">Chat<span class="info">5</span></a></li>
						<li id="notification" class="styled dropdown notification"><a
							class="dropdown-toggle" data-toggle="dropdown" href="#">Notification<span class="info">4</span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Lorem ipsum dolor sit amet, consectetur
										adipiscing elit... <span>07/19/2012</span>
								</a></li>
								<li><a href="#">Vivamus ut enim vitae nibh aliquet
										pre-tium lobortis sit amet tortor... <span>07/19/2012</span>
								</a></li>
								<li><a href="#">Ut id dui arcu, non tempus nunc... <span>
											07/19/2012</span>
								</a></li>
								<li><a href="#">Morbi faucibus suscipit nibh, ut
										pellen-tesque lectus pellentesque non.... <span>07/19/2012</span>
								</a></li>
								<li class="show_all"><a href="#">Show all notifications</a></li>
							</ul></li>
					</ul>
					<ul class="main_nav nav pull-right">
						<li id="search" class="search"><a href="#">Search</a>
							<div class="search_cont">
								<form:form commandName="grn" class="navbar-search form-search">
									<form:input path="id" type="text"
										class="input-medium search-query" placeholder="Search" />
									<form:button type="submit">Search</form:button>
								</form:form>
							</div></li>
						<li id="settings" class="styled dropdown settings"><a
							class="dropdown-toggle" data-toggle="dropdown" href="#">Settings</a>
							<ul class="dropdown-menu top_menu">
								<li class="show_all">Settings</li>
								<li><a class="mn_site" href="#"><span>Site</span></a></li>
								<li><a class="mn_admin" href="#"><span>Admin</span></a></li>
								<li><a class="mn_mail" href="#"><span>Mail</span></a></li>
								<li><a class="mn_user" href="#"><span>User</span></a></li>
							</ul></li>
						<li id="profile" class="styled dropdown profile"><a
							class="dropdown-toggle" data-toggle="dropdown" href="#">Profile</a>
							<ul class="dropdown-menu top_menu">
								<li class="profile group"><img src="image/user_1.jpg"
									width="50" height="50" alt="User">
									<ul>
										<li><strong>John Doe</strong></li>
										<li>@johndoe</li>
										<li><span>Administrator</span></li>
									</ul></li>
										<li><a class="mn_settings" href="#"><span>My Settings</span></a></li>
										<li><a class="mn_profile" href="profile.html"><span>My Profile</span></a></li>
										<li><a class="mn_logout" href="login.html"><span>Logout</span></a></li>
									</ul></li>
					</ul>
				</div>
				<h1 class="brand">
					<a href="index.html">PHOENIX</a>
				</h1>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="main_content row-fluid">
			<div class="span3" style="left: 0px; top: 0px">
				<div class="side_nav sidebar-nav" data-spy="affix"
					data-offset-top="150">
					<h3 class="main_menu group">
						<span class="title">Main Menu</span> <a id="nav_list_btn"
							class="btn-collapse btn btn-inverse"> <span
							class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>
						</a>
					</h3>
					<ul class="nav nav-list">
						<li class="sub"><a class="home" href="index.html">Administrator</a></li>
						<li class="sub"><a class="forms" href="#">Security</a>
							<ul>
								<li><a href="../Company%20Registration.html">Company Registration</a></li>
								<li><a href="../Company%20Modules.html">Company Modules</a></li>
								<li><a href="../Company%20Roles.html">Company Roles</a></li>
								<li><a href="../Company%20Stores.html">Company Stores</a></li>
								<li><a href="../Company%20Roles%20Tables.html">Company Roles Tables</a></li>
								<li><a href="../Company%20Forms%20&%20Reports.html">Company Forms &amp; Reports</a></li>
								<li><a href="../Users.html">Users</a></li>
							</ul></li>
						<li class="sub active"><a class="charts" href="charts.html">
								Inventory</a>
							<ul>
								<li><a href="Unit%20of%20Measurment.html">Unit Of Measurement</a></li>
								<li><a href="Item%20Master%20Data.html">Item Master Data</a></li>
							</ul></li>
								<li class="sub"><a class="home" href="index.html">Module 1</a></li>
								<li class="sub"><a class="home" href="index.html">Module 2</a></li>
								<li class="sub"><a class="home" href="index.html">Module 3</a></li>
								<li class="sub"><a class="home" href="index.html">Module 4</a></li>
								<li class="sub"><a class="home" href="index.html">Module 5</a></li>
								<li class="sub"><a class="home" href="index.html">Module 6</a></li>
								<li class="sub"><a class="home" href="index.html">Module 7</a></li>
								<li class="sub"><a class="home" href="index.html">Module 8</a></li>
								<li class="sub"><a class="home" href="index.html">Module 9</a></li>
								<li class="sub"><a class="home" href="index.html">Module 10</a></li>
							</ul>
					</div>
				<!--/.well -->
			</div>
			<!--/span-->
			<div class="span9">
				<div class="row-fluid">
					<div class="span12">
						<div class="span12 no_space">
							<div class="widget">
								<header>
									<h3>Good Received Note</h3>
								</header>
							<form:form commandName="grn" method="post">
								<section class="welly">
									<div class="row-fluid">
										<table style="width: 100%">
											<tr>
												<form:hidden path="id" name="grnId" id="grnId"/>
												<td>GRN No. <span class="required">*</span></td>
												<td colspan="2"><form:input path="GRN_NO" type="text" name="item_code" style="width: 120px" /></td>
												<td colspan="2"><form:checkbox path="activeFlag" name="grnNumber" id="grnNumber"/> Active Record</td>
											</tr>
											<tr>
												<td></td>
												<td colspan="2"></td>
												<td colspan="2"></td>
											</tr>
											<tr>
												<td>GRN Type <span class="required">*</span></td>
												<td colspan="2">
												<form:select path="GRN_TYPE_ID" class="chzn-select" style="width: 205px;" tabindex="2" name="D1">
													<form:options items="${GRNTypeList}" itemValue="id" itemLabel="value"></form:options>
												</form:select></td>
												<td rowspan="5" colspan="2">
													<div class="panel" style="vertical-align: middle; width: 360px">
														<table style="margin: 10px">
															<tr style="height: 5px">
																<td style="width: 141px">Posting Date</td>
																<td><form:input path="postingDate" type="text" name="posting_date" style="width: 150px"/></td>
															</tr>
															<tr style="height: 5px">
																<td colspan="2"></td>
															</tr>
															<tr>
																<td style="width: 141px">Document Date <span class="required">*</span></td>
																<td><form:input path="documentDate" type="text" name="document_date" style="width: 150px"/></td>
															</tr>
															<tr>
																<td colspan="2"></td>
															</tr>
															<tr>
																<td style="width: 141px">Status <span class="required">*</span></td>
																<td><form:select path="GRN_STATUS" class="chzn-select" style="width: 150px;" tabindex="2" name="D2">
																		<form:options items="${GRNStatusList}" itemValue="id" itemLabel="value"></form:options>
																	</form:select></td>
															</tr>
														</table>
													</div>
												</td>
											</tr>
											<tr>
												<td style="height: 3px" colspan="3"></td>
											</tr>
											<tr>
												<td>PO No. <span class="required">*</span></td>
												<td colspan="2">
													<form:select path="purchaseOrderId" onchange="getSupplierList(this.value);" class="chzn-select" style="width: 205px;" tabindex="2" name="D5">
														<form:options items="${purchaseOrderList}" itemValue="id" itemLabel="value"></form:options>
												</form:select></td>
											</tr>
											<tr>
												<td style="height: 5px"></td>
												<td style="height: 5px" colspan="2"></td>
											</tr>
											<tr>
												<td>Supplier <span class="required">*</span></td>
												<td colspan="2">
													<form:select path="supplierId" class="chzn-select" style="width: 205px;" tabindex="2" name="D4">
													<option value="1">S1</option>
													</form:select>
												<%-- <form:select path="supplierId" class="chzn-select" style="width: 205px;" tabindex="2" name="D4">
														<form:options items="${supplierList}" itemValue="id" itemLabel="value"></form:options>
												</form:select> --%>
												</td>
											</tr>
											<tr>
												<td colspan="5" style="height: 5px"></td>
											</tr>
											<tr>
												<td>Price List <span class="required">*</span></td>
												<td><form:select path="priceListId" class="chzn-select" style="width: 205px;" tabindex="2" name="D7">
														<form:options items="${priceList}" itemValue="id" itemLabel="value"></form:options>
												</form:select></td>
												<td colspan="2"></td>
												<td>
													<table style="margin-left: 10px" cellpadding="0" cellspacing="0">
														<tr style="height: 5px">
															<td style="width: 150px">DO .No</td>
															<td><form:input path="DO_NO" type="text" name="delivery_order_no" style="width: 150px"/></td>
														</tr>
													</table>

												</td>
											</tr>
											<tr>
												<td colspan="5" style="height: 5px"></td>
											</tr>

											<tr>
												<td style="vertical-align: top">Remarks</td>
												<td colspan="2"><form:textarea path="remarks" style="width: 205px"></form:textarea></td>
												<td style="vertical-align: top" colspan="2">
													<table style="margin: 10px" cellpadding="0" cellspacing="0">
														<tr>
															<td style="width: 150px">Invoice No.</td>
															<td><form:input path="vendorInvoiceId" type="text" name="invoice_number" style="width: 150px" disabled="disabled"/></td>
														</tr>
													</table>
												</td>
											</tr>


										</table>
									</div>
								</section>
								<ul class="nav nav-tabs tab_styled_dark">
									<li class="active"><a href="#general" data-toggle="tab">General</a></li>
									<li><a href="#attachment" data-toggle="tab">Attachment</a></li>
								</ul>
								<div class="tab-content tab_content_dark" style="border-color: #D1D1D1; border-top: 0px; border-bottom: 0px">
									<div id="general" class="tab-pane fade active in">
										<div class="widget table_basic_header">
											<header>
												<h3>Good Received Note Items</h3>
											</header>
											<section>
												<div style="overflow-x: scroll;">
													<table cellpadding="0" cellspacing="0"
														class="table_basic chbox css" style="width: 100%">
														<thead>
															<tr style="text-align: center">
																<td><input name="chbox" type="checkbox"
																	style="text-align: left"></td>
																<td>Warehouse</td>
																<td style="width: 120px">Internal Item ID</td>
																<td style="width: 120px">Item Name</td>
																<td style="width: 120px">Status</td>
																<td>Traceability No.</td>
																<td>Batch No.</td>
																<td>Expiry Date</td>
																<td>Quantity Received</td>
																<td>UoM</td>
																<td>Unit Price</td>
																<td>Total Price</td>
																<td>Item Cost</td>
																<td>IQI Result</td>
																<td>Inspector</td>
																<td>Next Stock Assessment Date</td>
																<td>Remarks</td>
																<td>Attachments</td>
																<td>Active Record</td>
															</tr>
														</thead>
														<tr style="text-align: center; vertical-align: middle">
															<td><input name="chbox" type="checkbox" style="text-align: left"></td>
															<td><select class="chzn-select"
																style="width: 125px;" tabindex="2" name="D8">
																	<option>Warehouse1</option>
																	<option>Warehouse 2</option>
															</select></td>
															<td><select class="chzn-select" style="width: 114px;" tabindex="2" name="D11">
																	<option>Item ID 1</option>
															</select></td>
															<td><select class="chzn-select" style="width: 77px;" tabindex="2" name="D12">
																	<option>Item1</option>
																	<option>Item 2</option>
															</select></td>
															<td><select class="chzn-select" style="width: 77px;" tabindex="2">
																	<option>New</option>
																	<option>Item 2</option>
															</select></td>
															<td><input type="text" style="width: 70px" /></td>
															<td><input type="text" style="width: 70px" /></td>
															<td><input type="text" style="width: 70px" /></td>
															<td><input type="text" style="width: 70px" /></td>
															<td><select class="chzn-select" style="width: 80px;"
																tabindex="2" name="D9">
																	<option>Box</option>
																	<option>Kilo</option>
															</select></td>
															<td><input type="text" style="width: 70px" disabled="disabled" /></td>
															<td><input type="text" style="width: 70px" disabled="disabled" /></td>
															<td><input type="text" style="width: 70px" disabled="disabled" /></td>
															<td><select class="chzn-select" style="width: 85px;" tabindex="2" name="D10">
																	<option>Select IQI</option>
																	<option>Kilo</option>
															</select></td>
															<td><select class="chzn-select" style="width: 85px;" tabindex="2" name="D13">
																	<option>Select Inspector</option>
															</select></td>
															<td><input type="text" style="width: 100px" disabled="disabled" /></td>
															<td><textarea type="text" style="width: 161px; height: 38px;"></textarea></td>
															<td><a href="Attachments.html" 
																onclick="javascript:void window.open('Attachments.html','1368701794193','width=700,height=500,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=1,left=0,top=0');return false;">View
																	Attachments</a></td>
															<td><input name="inventory0" type="checkbox" style="text-align: left; width: 17px;"></td>
														</tr>
														<tr style="height: 40px">
															<td></td>
															<td></td>
															<td style="width: 120px"></td>
															<td style="width: 120px"></td>
															<td style="width: 120px"></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
														</tr>
														<tr style="height: 40px">
															<td></td>
															<td></td>
															<td style="width: 120px"></td>
															<td style="width: 120px"></td>
															<td style="width: 120px"></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
															<td></td>
														</tr>
													</table>
												</div>
											</section>
											<section class="welly uniform_styled">
												<input type="button" value="Add New Record"> <input
													type="button" value="Delete">

											</section>


										</div>
									</div>

									<div id="attachment" class="tab-pane fade">
										<div class="row-fluid" id="selected_document_container">
											<table>
												<tr>
													<td style="color: maroon">Selected Documents</td>
													<td style="width: 40px"></td>
													<td>
														<div class="span9" style="width: 178px; color: maroon">Selected Revisions</div>
													</td>
												</tr>
												<tr>
													<td>
														<div class="span9">
															<select style="width: 150px" name="searchable[]"
																multiple="multiple">
																<option value="1">Document 1</option>
															</select>
														</div>
													</td>
													<td style="width: 40px"></td>
													<td>
														<div class="span9">
															<select style="width: 150px" multiple="multiple">
																<option value="1">Revision 3</option>
															</select>
														</div>
													</td>
												</tr>
												<tr>
													<td><a id="add_document" href="#"
														onclick='$("#available_document_container").show();$("#selected_document_container").hide();'>
														Add New Document</a></td>
													<td style="width: 40px"></td>
													<td><a id="add_Revision" href="#"
														onclick='$("#available_document_container").show();$("#selected_document_container").hide();'>
														Add New Revision</a></td>
												</tr>
											</table>
										</div>

										<div class="row-fluid" id="available_document_container"
											style="display: none">
											<table>
												<tr>
													<td style="color: maroon">Available Documents</td>
													<td
														style="vertical-align: middle; text-align: center; width: 100px">
													</td>
													<td style="color: maroon">Selected Documents</td>
													<td style="width: 40px"></td>
													<td style="color: maroon">Available Revisions</td>
													<td
														style="vertical-align: middle; text-align: center; width: 100px">
													</td>
													<td>
														<div class="span9" style="width: 178px; color: maroon">Selected
															Revisions</div>
													</td>
												</tr>
												<tr>
													<td rowspan="2">
														<div class="span9">
															<select style="width: 150px" name="searchable[]"
																multiple="multiple">
																<option value="2">Document 2</option>
																<option value="3">Document 3</option>
																<option value="4">Document 4</option>
															</select>
														</div>
													</td>
													<td style="vertical-align: bottom; text-align: center">
														<a href="#"><img src="image/Right.png"> </a>
													</td>
													<td rowspan="2">
														<div class="span9">
															<select style="width: 150px" name="searchable[]"
																multiple="multiple">
																<option value="1">Document 1</option>
															</select>
														</div>
													</td>
													<td style="width: 40px" rowspan="2"></td>
													<td rowspan="2">
														<div class="span9">
															<select style="width: 150px" multiple="multiple">
																<option value="1">Revision 1</option>
																<option value="2">Revision 2</option>
																<option value="4">Revision 4</option>
															</select>
														</div>
													</td>
													<td style="vertical-align: bottom; text-align: center">
														<a href="#"><img src="image/Right.png"> </a>
													</td>
													<td rowspan="2">
														<div class="span9">
															<select style="width: 150px" multiple="multiple">
																<option value="1">Revision 3</option>
															</select>
														</div>
													</td>
												</tr>
												<tr>
													<td style="vertical-align: top; text-align: center"><a
														href="#"><img src="image/Left.png"></a></td>
													<td style="vertical-align: top; text-align: center"><a
														href="#"><img src="image/Left.png"></a></td>
												</tr>
												<tr>
													<td><a id="add_document" href="#"
														onclick='$("#document_container").show();$("#available_document_container").hide();'>
															Define New Document</a></td>
													<td style="vertical-align: top; text-align: center"><a
														href="#"></a></td>
													<td></td>
													<td style="width: 40px"></td>
													<td><a id="add_Revision" href="#"
														onclick='$("#document_container").show();$("#available_document_container").hide();'>Define
															New Revision</a></td>
													<td style="vertical-align: top; text-align: center"><a
														href="#"></a></td>
													<td></td>
												</tr>
											</table>
											<section class="welly uniform_styled">
												<div class="row-fluid">
													<input type="reset" value="Cancel"
														onclick='$("#available_document_container").hide();$("#selected_document_container").show();'>
												</div>
											</section>

										</div>

										<div class="row-fluid" id="document_container"
											style="display: none">
											<table style="width: 100%">
												<tr>
													<td style="height: 30px">Document Type <span
														class="required">*</span></td>
													<td style="height: 30px"><select class="chzn-select"
														style="width: 200px;" tabindex="2">
															<option>Select Type</option>
													</select></td>
													<td style="height: 30px" colspan="2"><input
														type="checkbox" checked="chekced" /> Active Record</td>

												</tr>
												<tr style="height: 5px">
													<td colspan="4"></td>
												</tr>
												<tr>
													<td>Document Name <span class="required">*</span></td>
													<td><input type="text" name="document_name"
														style="width: 200px" /></td>
													<td colspan="2"></td>
												</tr>
												<tr>
													<td colspan="4"></td>
												</tr>
												<tr>
													<td>Document Description <span class="required">*</span></td>
													<td colspan="3"><textarea name="document_description0"
															style="width: 270px" rows="1" cols="20"></textarea></td>
												</tr>
												<tr>
													<td colspan="4"></td>
												</tr>
												<tr>
													<td>Revision No.<span class="required"> *</span></td>
													<td><input type="text" name="Revision_no"
														style="width: 137px" /></td>
													<td>
														<%-- <form method="post">
															<input name="Revision_name" type="file" />
														</form> --%>
													</td>
													<td></td>
												</tr>
												<tr style="height: 5px">
													<td colspan="4"></td>
												</tr>
											</table>
											<section class="welly uniform_styled">
												<div class="row-fluid">
													<input type="submit" value="Add"
														onclick='$("#document_container").hide();$("#available_document_container").show();'>
													<input type="reset" value="Cancel"
														onclick='$("#document_container").hide();$("#available_document_container").show();'>
												</div>
											</section>
										</div>

									</div>

								</div>
								<section class="welly uniform_styled">
									<div class="row-fluid">
										<input type="submit" value="Save"/> <input type="reset" value="Reset"/>
									</div>
								</section>
								</form:form>
							</div>
						</div>
					</div>
					<!--/row-->
				</div>
				<!--/span-->
			</div>
			<!--/row-->

			<footer>
				<p>© MIT 2013</p>
			</footer>

		</div>
		<!--/.fluid-container-->
		<!-- ===================== CHAT - Modal ===================== -->
		<div id="chat_modal" class="chat_modal modal fade hide">
			<div class="modal-header">
				<ul>
					<li class="toggle_users"><a href="#">Show Users</a></li>
					<li class="status"><a class="online" href="#"><span>Status</span></a>
						<ul>
							<li><a class="online" href="#" title="Online"><span>Online</span></a></li>
							<li><a class="away" href="#" title="Away"><span>Away</span></a></li>
							<li><a class="busy" href="#" title="Busy"><span>Busy</span></a></li>
							<li><a class="invisiblee" href="#" title="Invisible"><span>Invisible</span></a></li>
							<li><a class="offline" href="#" title="Offline"><span>Offline</span></a></li>
						</ul></li>
					<li class="chat_name">John Doe</li>
				</ul>
				<button type="button" class="close" data-dismiss="modal">x</button>
			</div>
			<div class="modal-body">
				<div class="msg_cont left">
					<img src="image/user_1.jpg" width="50" height="50" alt="User">
					<ul>
						<li>
							<h3>John Doe:</h3> <span>16 minutes ago</span>
						</li>
						<li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in
							dui tortor. Mauris sed volutpat metus. Duis ut sapien sapien, id
							pellentesque orci. Nullam nisl metus, sodales ut laoreet eget,
							pretium porttitor quam. Sed varius vulputate lacinia.</li>
					</ul>
				</div>
				<div class="msg_cont right">
					<img src="image/user_2.jpg" width="50" height="50" alt="User">
					<ul>
						<li>
							<h3>Jessie Doe:</h3> <span>16 minutes ago</span>
						</li>
						<li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in
							dui tortor. Mauris sed volutpat metus. Duis ut sapien sapien, id
							pellentesque orci. Nullam nisl metus, sodales ut laoreet eget,
							pretium porttitor quam. Sed varius vulputate lacinia.</li>
					</ul>
				</div>
				<div class="msg_cont left">
					<img src="image/user_1.jpg" width="50" height="50" alt="User">
					<ul>
						<li>
							<h3>John Doe:</h3> <span>16 minutes ago</span>
						</li>
						<li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in
							dui tortor. Mauris sed volutpat metus. Duis ut sapien sapien, id
							pellentesque orci. Nullam nisl metus, sodales ut laoreet eget,
							pretium porttitor quam. Sed varius vulputate lacinia.</li>
					</ul>
				</div>
			</div>
			<div class="modal-footer">
				<textarea></textarea>
				<a href="#" class="btn btn-inverse">Send</a>
			</div>
		</div>
		<!-- ===================== JS ===================== -->
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/ios-orientationchange-fix.js"></script>
		<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
		<script src="js/common.js"></script>
		<!-- Site specific - JS -->
		<script src="js/prettify.js"></script>
		<script src="js/jquery.maskedinput-1.3.min.js"></script>
		<script src="js/chosen.jquery.min.js"></script>
		<script src="js/scrollability.min.js"></script>
		<script src="js/jquery.dropkick-1.0.0.js"></script>
		<script src="js/jquery.multi-select.js"></script>
		<script src="js/jquery.quicksearch.js"></script>
		<script src="js/jquery.autogrowtextarea.js"></script>
		<script src="js/jquery.textareaCounter.plugin.js"></script>
		<script src="js/ui.spinner.min.js"></script>
		<script src="js/jquery.ibutton.min.js"></script>
		<script src="js/jquery.metadata.js"></script>
		<script src="js/script.js"></script>
		<script src="js/forms_elements.js"></script>
		<!-- Site specific -->
		<script src="js/prettify.js"></script>
		<script src="js/jquery.autoGrowInput.js"></script>
		<script src="js/jquery.tagedit.js"></script>
		<script src="js/slidernav-min.js"></script>
		<script src="js/glDatePicker.min.js"></script>
		<script src="js/jquery-ui-timepicker-addon.js"></script>
		<script src="js/jquery-ui-sliderAccess.js"></script>
		<script src="js/jquery.miniColors.min.js"></script>
		<script src="js/colorpicker.js"></script>
		<script src="js/jquery.knob.js"></script>
		<script src="js/script.js"></script>
		<script src="js/utility.js"></script>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push([ '_setAccount', 'UA-31818910-2' ]);
			_gaq.push([ '_setDomainName', 'loxdesign.net' ]);
			_gaq.push([ '_trackPageview' ]);

			(function() {
				var ga = document.createElement('script');
				ga.type = 'text/javascript';
				ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl'
						: 'http://www')
						+ '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(ga, s);
			})();
		</script>
		</div>

	</body>
</html>